<ng-container>
  <div class="lv-date-range-picker-wrapper" [ngClass]="{ disabled: lvDisabled, active: open }">
    <div class="lv-date-picker-main" [ngClass]="getSelectedClass">
      <input
        lv-input
        [(ngModel)]="displayStartValue"
        (click)="onFocus($event, 'start')"
        (blur)="onBlur()"
        (ngModelChange)="onInputChange($event, 'start')"
        [readonly]="lvReadonly"
        [disabled]="lvDisabled"
        [placeholder]="lvPlaceholder[0]"
      />
      <span>{{ 'timeTo' | i18n }}</span>
      <input
        lv-input
        [(ngModel)]="displayEndValue"
        (click)="onFocus($event, 'end')"
        (blur)="onBlur()"
        (ngModelChange)="onInputChange($event, 'end')"
        [readonly]="lvReadonly"
        [disabled]="lvDisabled"
        [placeholder]="lvPlaceholder[1]"
      />
    </div>

    <!-- 清除icon -->
    <div class="lv-date-picker-clear" *ngIf="lvShowClear && !empty && !lvDisabled" (click)="clear()">
      <i lv-icon="lv-icon-clear" lvColorState="true"></i>
    </div>

    <!-- 下展icon -->
    <div *ngIf="!lvInline" class="lv-date-picker-operation" (click)="toggleOpen()">
      <i lv-icon="lv-icon-calendar" [lvDisabled]="lvDisabled"></i>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="lvInline" [ngTemplateOutlet]="datePanelTpl"></ng-container>

<!-- overlay -->
<ng-template #datePanelTpl>
  <lv-date-picker-panel
    [lvDisabledDate]="getDateDisableState"
    [lvShowTime]="getShowTimeState()"
    [lvShowTodayButton]="false"
    [lvShowNowButton]="false"
    [lvNowAsBaseTime]="lvNowAsBaseTime"
    [lvPanelClass]="lvPanelClass"
    [lvCalendarCell]="lvCalendarCell"
    [lvCalendarYearCell]="lvCalendarYearCell"
    [lvCalendarMonthCell]="lvCalendarMonthCell"
    [lvOnlyShowActiveCell]="lvOnlyShowActiveCell"
    [lvPanelTitleReadonly]="lvPanelTitleReadonly"
    [lvCalendarYearOperate]="lvCalendarYearOperate"
    [lvCalendarMonthOperate]="lvCalendarMonthOperate"
    [lvFooterExtra]="lvFooterExtra"
    [lvOpenObserver]="lvInline ? null : _open$"
    [lvIsRange]="true"
    [lvPresetRanges]="lvPresetRanges"
    [(ngModel)]="_value"
    (ngModelChange)="dateChange($event)"
    (lvActiveDateChange)="activeDateChange($event)"
    [lvCurrentInput]="currentInput"
    (lvCurrentInputChange)="currentInputChange($event)"
    [@showItem]="animationState"
    (@showItem.done)="onAnimationDone($event)"
  >
  </lv-date-picker-panel>
</ng-template>
